import React, { ReactElement, useContext, useMemo } from 'react';
import { View, Text, Image } from 'react-native';

import styles from './style';
import Button from '../../../../components/Button';
import { Store } from '../../reducer';
import {
  CONTENT_WIDTH,
  EDIT_CONTENT_WIDTH,
  PROGRESS_WIDTH,
  EDIT_PROGRESS_WIDTH,
  TITLE_WIDTH,
  EDIT_TITLE_WIDTH
} from '../../constant';
import { downloadSelected } from '../../../../constant/resource';
import {
  selectDownloadParent,
  calBytes,
  controlSingleDownload
} from '../../actions';
import { APP_RED } from '../../../../constant/color';
import { SortedDownloadVideoTasks } from '../../../../util/videoDownload/types';

export default (props: SortedDownloadVideoTasks): ReactElement => {
  let {
    parentId,
    parentTitle,
    progress,
    totalSize,
    isPaused,
    isFailed,
    source
  } = props;

  const { state } = useContext(Store);
  const { isEdit, selectedPIds, currentDownload, netSpeed } = state;

  const isSelected = selectedPIds.includes(parentId);

  const contentWidth = isEdit ? EDIT_CONTENT_WIDTH : CONTENT_WIDTH;
  const progressLineWidth = isEdit ? EDIT_PROGRESS_WIDTH : PROGRESS_WIDTH;
  const titleWidth = isEdit ? EDIT_TITLE_WIDTH : TITLE_WIDTH;

  const isDownloading = currentDownload.parentId === parentId;

  if (isDownloading) {
    ({
      parentId,
      parentTitle,
      progress,
      totalSize,
      isPaused,
      isFailed,
      source
    } = currentDownload);
  }

  const statusStyle = isPaused || isFailed ? { color: APP_RED } : {};
  const progressStyle =
    isPaused || isFailed ? { backgroundColor: APP_RED } : {};

  let statusDesc = '';
  if (isPaused) {
    statusDesc = '下载暂停';
  } else if (isFailed) {
    statusDesc = '下载失败';
  } else if (isDownloading) {
    statusDesc = `${calBytes(netSpeed)}/S`;
  } else {
    statusDesc = '等待中';
  }

  return useMemo(
    (): ReactElement => (
      <Button
        style={styles.container}
        onPress={(): void => {
          if (isEdit) {
            selectDownloadParent(parentId);
          } else {
            controlSingleDownload(parentId);
          }
        }}
      >
        {isEdit ? (
          <View style={styles.selectedBox}>
            {isSelected && (
              <Image style={styles.selectedIcon} source={downloadSelected} />
            )}
          </View>
        ) : null}
        <View style={[styles.content, { width: contentWidth }]}>
          <Text style={[styles.title, { width: titleWidth }]} numberOfLines={1}>
            {parentTitle}
          </Text>
          <Text
            style={[styles.subTitle, { width: titleWidth }]}
            numberOfLines={1}
          >
            {source}
          </Text>
          <View style={styles.info}>
            <Text style={[styles.status, statusStyle]}>{statusDesc}</Text>
            <Text style={styles.status}>
              {calBytes(progress * totalSize)} / {calBytes(totalSize)}
            </Text>
          </View>
          <View style={[styles.loadProgress, { width: progressLineWidth }]}>
            <View
              style={[
                styles.progress,
                progressStyle,
                { width: progress * progressLineWidth }
              ]}
            />
          </View>
        </View>
      </Button>
    ),
    [
      contentWidth,
      isEdit,
      isSelected,
      parentId,
      parentTitle,
      progress,
      progressLineWidth,
      progressStyle,
      source,
      statusDesc,
      statusStyle,
      titleWidth,
      totalSize
    ]
  );
};
